<template>
	<!-- 添加员工 -->
    <div class="addcashier">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "添加员工", "url": "/addcashier"}]'></tz-breadcrumb>
      <!-- 数据表单 -->
<div style="margin: 20px;"></div>
    <el-form  :model="addcashierForm" class="form" label-width="150px">
      <el-form-item label="员工名称">
        <el-input v-model="addcashierForm.nickname" class="form-input" placeholder="员工名称输入全英文或者全中文,‘王林’或‘Alan.Smith’"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input  v-model="addcashierForm.mobile" class="form-input" placeholder="请输入真实的手机号码"></el-input>
      </el-form-item>
      <el-form-item label="所属商家">
        <el-select  v-model="addcashierForm.store_code" placeholder="选择所属商户" @change="lookStore">
          <el-option v-for="item in store_code_list" :key="item.id" :label="item.store_name" :value="item.store_code"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择部门或区域">
          <el-select  v-model="addcashierForm.department_id" placeholder="选择部门或区域" @change="look">
            <el-option v-for="item in department_list" :key="item.id" :label="item.name" :value="item.id" ref="departlist"> 
            </el-option>
          </el-select>
        <el-button type="primary" @click="showDialogAdd">添加</el-button>
      </el-form-item>
      <el-form-item label="密码">
        <el-input  type="password"  v-model="addcashierForm.password" class="form-input" placeholder='密码至少8位，字母、数字、特殊符号（必须包含其中两个）'></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password"  v-model="addcashierForm.password_confirmation" class="form-input" placeholder="请确认密码"></el-input>
      </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>

  <!-- <el-dialog title="添加部门或区域" :visible.sync="dialogVisible" width="30%" >
    
    <el-table :data="gridData">
      <el-table-column property="apartDate" label="添加部门或区域" width="150"></el-table-column>
    </el-table>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog> -->
  <el-dialog title="添加部门或区域" :visible.sync="dialogFormVisible">
  <el-form :model="apartForm">
    <el-form-item label="部门或区域名称" :label-width="formLabelWidth">
      <el-input v-model="apartForm.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureAddApart()" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
  </div>
</el-dialog>
</div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    this.getstorelist();
  },
  data: function () {
    return {
      addcashierForm: {
        // 收银员名称
        nickname: '',
        // 收银员名称
        mobile: '',
        // 收银员名称
        password: '',
        // 收银员名称
        password_confirmation: '',
        // 所属商户
        store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
        // 部门id
        department_id: '',
        // 部门名称
        department_desc: ''
      },
      // 商户列表
      store_code_list: [],
      // 部门列表
      department_list: [],
      // 弹框是否打开
      dialogFormVisible: false,
      // 添加部门或区域的名称
      apartForm: {
        name: ''
      },
      formLabelWidth: '120px',
      fullscreenLoading: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    onSubmit () {
      let that = this;
      var regmobilePhone = /^1[34578]\d{9}$/;
      // 请求前判断
      // var regRealName = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      // 验证真实姓名全英文或者全中文，最少2字符英文可以带.,中文不可以
      var regRealName = /^([A-Za-z_. ]{2,20}|[\u4e00-\u9fa5]{2,20})$/;
      // 验证密码至少8位，字母、数字、特殊符号（必须包含其中两个）
      var regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[\w~!@#$%^&*()_+`\-={}:";'<>?,./]{8,}$/;
      if (that.addcashierForm.nickname === '') {
        that.$message.error('员工名称不能为空');
        console.log(1);
        return false;
      } else if (!regRealName.test(that.addcashierForm.nickname)) {
        that.$message.error('员工名称输入有误，请重新输入');
        return false;
      } else if (that.addcashierForm.mobile === '') {
        that.$message.error('手机号码不能为空');
        return false;
      } else if (!regmobilePhone.test(that.addcashierForm.mobile)) {
        that.$message.error('手机号格式不正确');
        return false;
      } else if (that.addcashierForm.store_code === '') {
        that.$message.error('所属商家不能为空');
        return false;
      } else if (that.addcashierForm.department_id === '') {
        that.$message.error('部门或区域不能为空');
        return false;
      } else if (that.addcashierForm.password === '') {
        that.$message.error('密码不能为空');
        return false;
      } else if (!regPassword.test(that.addcashierForm.password)) {
        that.$message.error('密码至少8位，字母、数字、特殊符号（必须包含其中两个）');
        return false;
      } else if (that.addcashierForm.password_confirmation === '') {
        that.$message.error('确认密码不能为空');
        return false;
      } else if (that.addcashierForm.password_confirmation !== that.addcashierForm.password) {
        that.$message.error('密码和确认密码不一致');
        return false;
      }
      console.log(1);
      that.loading = true;
      that.fullscreenLoading = !that.fullscreenLoading;
      http.post(api.addcashier, {
        token: localStorage.getItem('token'),
        store_code: that.addcashierForm.store_code,
        nickname: that.addcashierForm.nickname,
        mobile: that.addcashierForm.mobile,
        department_id: that.addcashierForm.department_id,
        department_desc: that.addcashierForm.department_desc,
        password: that.addcashierForm.password,
        password_confirmation: that.addcashierForm.password_confirmation
      }, response => {
        console.log(2);
        console.log(response);
        that.fullscreenLoading = !that.fullscreenLoading;
        if (response.code === '10001' && response.status === 'SUCCESS') {
          // that.$confirm('添加员工成功');
          that.$message.success('添加员工成功');
          // 对该表单项进行重置，将其值重置为初始值并移除校验结果
          // that.$refs[that.addcashierForm].resetField();
          // 表单清空
          that.addcashierForm.nickname = '';
          that.addcashierForm.mobile = '';
          that.addcashierForm.store_code = '';
          that.addcashierForm.department_id = '';
          that.addcashierForm.password = '';
          that.addcashierForm.password_confirmation = '';
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.fullscreenLoading = !that.fullscreenLoading;
        console.log(3);
      });
    },
    getstorelist () {
      let that = this;
      http.get(api.merchantList, {
        token: localStorage.getItem('token')
      }, response => {
        console.log(response);
        console.log(555);
        if (response.code === '10001') {
          that.store_code_list = response.data[0].res.data;
        }
      }, () => {
        console.log('网络错误');
      });
    },
    // 添加按钮出现弹框
    showDialogAdd () {
      var that = this;
      if (that.addcashierForm.store_code === '') {
        that.$message.error('所属商家不能为空');
        return false;
      }
      that.dialogFormVisible = true;
    },
    // 添加部门按钮
    sureAddApart () {
      var that = this;
      if (that.apartForm.name === '') {
        that.$message.error('部门或区域名称不能为空');
        return false;
      }
      http.post(api.createDepartment, {
        token: localStorage.getItem('token'),
        store_code: that.addcashierForm.store_code,
        name: that.apartForm.name
      }, response => {
        console.log(response);
        console.log(555);
        that.dialogFormVisible = false;
        if (response.code === '10001') {
          that.$message.success('添加部门或区域成功');
          that.getApartList();
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.$message.error('网络错误,请稍后再试');
        that.dialogFormVisible = false;
      });
    },
    // 获取部门列表
    getApartList () {
      var that = this;
      http.post(api.getDepartment, {
        token: localStorage.getItem('token'),
        store_code: that.addcashierForm.store_code
      }, response => {
        console.log(response);
        console.log(666);
        if (response.code === '10001') {
          // that.$message.success(response.msg)
          that.department_list = response.data;
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.$message.error('网络错误,请稍后再试');
        that.dialogFormVisible = false;
      });
    },
    look () {
      var that = this;
      // select获取对应选中的name值
      that.addcashierForm.department_desc = that.$refs.departlist.find(item => item.value === that.addcashierForm.department_id)['label'];
    },
    lookStore () {
      if (this.addcashierForm.store_code !== '') {
        this.getApartList();
        this.addcashierForm.department_id = '';
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.form {
  padding: 2rem;
  padding-right: 200px;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;

  .form-item {
    display: inline-block;
    margin-right: 35px;

    label {
      font-size: 14px;
      color: #333;
      width: 70px;
      display: inline-block;
    }

    .form-input, .form-select {
      width: 200px;
    }
  }

  .line {
    height: 15px;
  }
}

.server-item {
  width: 20px;
  height: 20px;
  margin: 5px;
}
</style>
